<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div class="jumbotron">
            <h1>欢迎登陆页面！</h1>
            <p>这是一个超大屏幕（Jumbotron）的实例。</p>
            <div id="message"></div>
            <form class="form-inline" method="post" action="/login">
                <div class="form-group">
                    <input class="form-control" name="username" type="text" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input class="form-control" name="password" type="password" placeholder="密码">
                </div>
                <button class="btn btn-primary" id="login" type="button" >登录</button>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#login").click(function(){
                $.ajax({
                    url:'/login',
                    type:'post',
                    data:{
                        username:$('[name="username"]').val(),
                        password:$('[name="password"]').val()
                    },
                    success:function (rs) {
                        if('ok' ==  rs.message){
                            $.cookie('token',rs.token,{path : '/'});
                            window.location.href='index.html';
                        }else {
                            $('#message').addClass('alert alert-danger').html(rs.message);
                        }
                    }
                    
                });
            });
        });
    </script>
</body>
</html>